<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>活动修改-活动管理</title>
	<c:import url="/public/head-tag.jsp"/>
	<style type="text/css">
		.table-lottery td{
			padding:5px;
		}
		.textarea{
			width:100%;
			min-width:300px;
			min-height:150px;
			border:0;
		}
		.xiuxiu-upload {
			width: 310px;
			height: 130px;
		}
		.text-datetime{
			width:134px;
		}
	</style>
</head>
<body>
    <c:import url="/public/header.jsp"/>
    <section class="container">
		<c:set var="sidebar" scope="request" value="content"/>
		    <c:set var="navbar" scope="request" value="activity"/>
		    <c:import url="/public/sidebar.jsp"/>
    	<div class="content">
    		<div class="content-top">
    			<h3 class="content-title">
    				<div class="bread">
    					<a href="/Manager/web/action/listPage">活动管理</a>
    					<span>&gt;</span>
    					<span>活动修改</span>
    				</div>
    			</h3>
    		</div>
    		<div class="content-main">
    			<div class="block block-main">
    				<div class="block-content" id="block-content" init="${action.actionType}" >
    				<div class="form-row form-block">
							<span class="row-label">活动类别：</span>
							<div class="row-content">
								<select activity-select name="type" class="select" ipattern="^\d+$" iname="活动类别" disabled="disabled">
									<option value="1" data-type="registration">报名活动</option>
									<option value="2" data-type="outside">外链活动</option>
									<option value="4" data-type="voteact">投票活动</option>
									<option value="6" data-type="ltable">大转盘</option>
									<option value="8" data-type="notify">公告活动</option>
								</select>
							</div>
						</div>

						<form  class="fn-hide"  data-form="registration"  action="/Manager/web/action/updateSave" method="post" goback="/Manager/web/action/listPage">
							<div class="form-block">
								<input type="hidden" name="type" value="1">
								<input type="hidden" name="id" value="${action.actionId}">
								<div class="form-row">
									<span class="row-label">活动标题：</span>
									<div class="row-content">
										<input name="title" type="text" class="text"   ipattern="^.{2,40}$" iname="活动标题" value="${action.title}"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">活动时间：</span>
									<div class="row-content">									 	
										<input type="text" name="sdate"  value="${action.applyStartDate}" class="text text-datetime" date-select="datetime" iname="活动起始时间" itip="请选择活动起始时间" placeholder="活动起始时间" />
										<span>~</span>
										<input type="text" name="edate"  value="${action.applyEndDate}"  class="text text-datetime" date-select="datetime" iname="活动结束时间" itip="请选择活动结束时间" placeholder="活动结束时间" />
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">活动权重：</span>
									<div class="row-content">
										<input name="sort" type="text" placeholder="权重越高，排名越靠前"  class="text"   ipattern="^\d+(\.\d+)?$" iname="活动权重" value="${action.sort}"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">报名上限：</span>
									<div class="row-content">
										<input name="maxAppliment" type="text" class="text" value="${action.maxAppliment}" iname="报名上限" placeholder="没有上限请填写-1" />
										<p class="value-note color-red">如果没有报名上限，默认为-1</p>
									</div>
								</div>


								<div class="form-row">
									<span class="row-label">活动图片：</span>
									<div class="row-content">
										<div  xx-upload>
											<script type="text/config">
												{
													name:'thumb',
													checker:{
														iname:'活动图片',
														itip:'请上传活动图片'
													},
													uploadURL:'/Manager/web/resource/upload/',
													template:'/Manager/web/resource/download?resourceId={value}',
													value:'${action.thumb}'
												}
											</script>
										</div>
										<p class="value-note">图片规格：640x280</p>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">报名项目：</span>
									<div class="row-content">
										<div class="row-value">
											<ul field-editor>
												<script type="vue/data">
													${itemJSON}
												</script>
												<template v-for="item in list" >
													<li>
														<span class="item">
															<input type="text" class="text" v-model="item.title" lazy @keydown.enter.prevent="addField({isNeeded:1})"  placeholder="输入报名项目名称" iname="项目名称" ipattern="^.{1,60}$" v-bind:value="item.title"/>
															<a href="javascript:;" @click="removeField(item.id)" class="action-link action-remove">删除-</a>
														</span>
														<span>
															<label><input type="checkbox"  v-model="item.isNeeded"  :true-value="1"  :false-value="0" />必填项</label>
														</span>
														<span>
															<select v-model="item.type" class="select">
				 											 <option value="">请选择控件类型</option>
				 											 <option value="1">文本输入框</option>
															 <option value="2">多行输入框</option>
				 											 <option value="3">数量选择框</option>
															</select>
																<input 
															v-if="item.type==3"
															type="text" 
															class="text text-100" 
															lazy 
															v-model="item.maxnumber" 
															 placeholder="报名最大人数" iname="报名最大人数" ipattern="^\d{1,2}$" v-bind:value="item.maxnumber"/>
														</span>
													</li>
												</template>
												<input type="hidden" name="items" value="{{list | json 0}}"/>
												<template v-if="list.length<max">
													<li>
														<a href="javascript:;" @click="addField({isNeeded:1})" class="action-link">+添加项目</a>
													</li>
												</template>
											</ul>
										</div>
									</div>
								</div>
								<div class="form-row">
									<span class="row-label">活动提示：</span>
									<div class="row-content">
										<input name="tips" type="text" class="text"  iname="活动提示" placeholder="活动提示"  value="${action.tips }"/>
									</div>
								</div>
								<div class="form-row">
									<span class="row-label">介绍：</span>
									<div class="row-content">
										<textarea name="intro" id="desc" simditor class="textarea" iname="活动介绍"   value="">${action.intro}</textarea>
										
									</div>
								</div>
								<div class="form-row">
									<span class="row-label">活动配置：</span>
									<div class="row-content">
									    <%-- <p class="row-value">
											<input  type="checkbox" name="isloop" id="isloop1" value="1" <c:if test="${action.loopStatus == 1}"> checked="checked"  </c:if> />
											<label for="isloop1">是否轮播</label>
										</p>	 --%>									
										<p>
											<input  type="checkbox" name="isPay" id="isPay2" pay="toggle" <c:if test="${action.payStatus == 1}"> checked="checked"  </c:if>  action="isPay"/>
											<label for="isPay2">需支付费用</label>
										</p>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">费用名称：</span>
									<div class="row-content">
										<input name="payname" pay="true" type="text"  class="text"   ipattern="^.{2,20}$" iname="费用名称" value="${action.payName}"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">费用金额：</span>
									<div class="row-content">
										<input name="pay"  pay="true"  type="text"  class="text" ipattern="^\d+(\.\d+)?$" iname="费用金额" value="${action.payAmount}"/>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">截止日期：</span>
									<div class="row-content">
										<input name="payEndTime"  pay="true"  data-action="dateSelect" type="text"  class="text"  iname="截止日期"  value="${action.payEndDate}"/>
									</div>
								</div>
								<div class="form-row form-row-btn">
									<div class="row-content">
										<input type="submit" value="确认提交" class="btn btn-default"/>
									</div>
								</div>
							</div>
						</form>
						<form  class="fn-hide"  data-form="voteact"  action="/Manager/web/action/updateSave" method="post" goback="/Manager/web/action/listPage">
							<div class="form-block">
							    <input type="hidden" name="type" value="4">
								<input type="hidden" name="id" value="${action.actionId}">
								
								<div class="form-row">
									<span class="row-label">活动标题：</span>
									<div class="row-content">
										<input name="title" type="text" class="text"   ipattern="^.{2,40}$" iname="活动标题" value="${action.title}"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">活动时间：</span>
									<div class="row-content">
										<input type="text" name="sdate"  value="${action.applyStartDate}" class="text text-datetime" date-select="datetime" iname="活动起始时间" itip="请选择活动起始时间" placeholder="活动起始时间" />
										<span>~</span>
										<input type="text" name="edate"  value="${action.applyEndDate}"  class="text text-datetime" date-select="datetime" iname="活动结束时间" itip="请选择活动结束时间" placeholder="活动结束时间" />
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">活动权重：</span>
									<div class="row-content">
										<input name="sort" type="text" placeholder="权重越高，排名越靠前"  class="text"   ipattern="^\d+(\.\d+)?$" iname="活动权重" value="${action.sort}"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">报名上限：</span>
									<div class="row-content">
										<input name="maxAppliment" type="text" class="text" value="${action.maxAppliment}" iname="报名上限" placeholder="没有上限请填写-1" />
										<p class="value-note color-red">如果没有报名上限，默认为-1</p>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">报名素材：</span>
									<div class="row-content">
										<select name="materialType" data-selected="${action.prompt}" class="select"  iname="报名素材">
											<option value="0">图片</option>
											<option value="1">文字</option>
										</select>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">活动图片：</span>
									<div class="row-content">
										<div  xx-upload>
											<script type="text/config">
												{
													name:'thumb',
													checker:{
														iname:'活动图片',
														itip:'请上传活动图片'
													},
													uploadURL:'/Manager/web/resource/upload/',
													template:'/Manager/web/resource/download?resourceId={value}',
													value:'${action.thumb}'
												}
											</script>
										</div>
										<p class="value-note">图片规格：640x280</p>
									</div>
								</div>
								<div class="form-row">
									<span class="row-label">报名项目：</span>
									<div class="row-content">
										<div class="row-value">
											<ul field-editor>
												<script type="vue/data">
													${itemJSON}
												</script>
												<template v-for="item in list" >
													<li>
														<span class="item">
															<input type="text" class="text" v-model="item.title" lazy @keydown.enter.prevent="addField({isNeeded:1})"  placeholder="输入报名项目名称" iname="项目名称" ipattern="^.{1,20}$" v-bind:value="item.title"/>
															<a href="javascript:;" @click="removeField(item.id)" class="action-link action-remove">删除-</a>
														</span>
														<span>
															<label><input type="checkbox"  v-model="item.isNeeded"  :true-value="1"  :false-value="0" />必填项</label>
														</span>
														
													</li>
												</template>
												<input type="hidden" name="items" value="{{list | json 0}}"/>
												<template v-if="list.length<max">
													<li>
														<a href="javascript:;" @click="addField({isNeeded:1})" class="action-link">+添加项目</a>
													</li>
												</template>
											</ul>
										</div>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">介绍：</span>
									<div class="row-content">
										<textarea name="intro" id="desc4" simditor class="textarea" iname="活动介绍"   value="">${action.intro}</textarea>
										
									</div>
								</div>
								<%-- <div class="form-row">
									<span class="row-label">投票状态</span>
									<div class="row-content">
									<select name="status" class="select">
									 <c:if test="${action.status= -1}"> <option value="-1">已下线</option> </c:if>
									 <c:if test="${action.status= 0 }"> <option value="0">已下线</option> </c:if>
									 <c:if test="${action.status= 1}"> <option value="1">既可报名又可投票</option> </c:if>
									 <c:if test="${action.status= 2}"> <option value="2">投票结束</option> </c:if>
									 <c:if test="${action.status= 3}"> <option value="3">只可报名不可投票</option> </c:if>
									 <c:if test="${action.status= 4}"> <option value="4">不可报名可投票</option> </c:if>
									  <option value="1">既可报名又可投票</option>
									  <option value="2">投票结束</option>
									  <option value="3">只可报名不可投票</option>
									  <option value="4">不可报名可投票</option>
								    </select>
								    </div>
								</div> --%>
								<div class="form-row form-row-btn">
									<div class="row-content">
										<input type="submit" value="确认提交" class="btn btn-default"/>
									</div>
								</div>
							</div>
						</form>
						<form data-form="outside" class="fn-hide" action="/Manager/web/action/updateSave" method="post" goback="/Manager/web/action/listPage">
							<div class="form-block">
								<input type="hidden" name="type" value="2">
								<input type="hidden" name="id" value="${action.actionId}">
								
								<div class="form-row">
									<span class="row-label">活动标题：</span>
									<div class="row-content">
										<input name="title" type="text" class="text"   ipattern="^.{2,40}$" iname="活动标题" value="${action.title }"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">活动时间：</span>
									<div class="row-content">
										<jsp:useBean id="dateValue" class="java.util.Date"/>

									 	<jsp:setProperty name="dateValue" property="time" value="${action.applyStartTime}"/>
										<fmt:formatDate var="applyStartTime" value="${dateValue}" pattern="yyyy-MM-dd HH:mm"/>
										<input type="text" name="sdate"  value="${applyStartTime}" class="text text-datetime" date-select="datetime" iname="活动起始时间" itip="请选择活动起始时间" placeholder="活动起始时间" />
										<span>~</span>

										<jsp:setProperty name="dateValue" property="time" value="${action.applyEndTime}"/>
										<fmt:formatDate var="applyEndTime" value="${dateValue}" pattern="yyyy-MM-dd HH:mm"/>
										<input type="text" name="edate"  value="${applyEndTime}"  class="text text-datetime" date-select="datetime" iname="活动结束时间" itip="请选择活动结束时间" placeholder="活动结束时间" />
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">外链地址：</span>
									<div class="row-content">
										<input type="text" class="text" itip="请输入外链地址" placeholder="输入外链地址" name="url" value="${action.url}" />
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">活动权重：</span>
									<div class="row-content">
										<input name="sort" type="text" placeholder="权重越高，排名越靠前"  class="text"   ipattern="^\d+(\.\d+)?$" iname="活动权重" value="${action.sort}"/>
									</div>
								</div>


								<div class="form-row">
									<span class="row-label">活动图片：</span>
									<div class="row-content">
										<div  xx-upload>
											<script type="text/config">
												{
													name:'thumb',
													checker:{
														iname:'活动图片',
														itip:'请上传活动图片'
													},
													uploadURL:'/Manager/web/resource/upload/',
													template:'/Manager/web/resource/download?resourceId={value}',
													value:'${action.thumb}'
												}
											</script>
										</div>
										<p class="value-note">图片规格：640x280</p>
									</div>
								</div>
								
								<div class="form-row form-row-btn">
									<div class="row-content">
										<input type="submit" value="确认提交" class="btn btn-default"/>
									</div>
								</div>
							</div>
						</form>
						<form  class="fn-hide"  data-form="ltable"  action="/Manager/web/action/updateSave" method="post" goback="/Manager/web/action/listPage">
							<div class="form-block">
							<input type="hidden" name="type" value="6">
								<input type="hidden" name="id" value="${action.actionId}">
								<div class="form-row">
									<span class="row-label">转盘名称：</span>
									<div class="row-content">
										<input name="title" type="text" class="text"   ipattern="^.{2,40}$" iname="转盘名称" value="${action.title}"/>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">抽奖时间：</span>
									<div class="row-content">
										<input type="text" name="sdate"  value="${action.applyStartDate}" class="text text-datetime" date-select="datetime" iname="活动起始时间" itip="请选择活动起始时间" placeholder="活动起始时间" />
										<span>~</span>
										<input type="text" name="edate"  value="${action.applyEndDate}"  class="text text-datetime" date-select="datetime" iname="活动结束时间" itip="请选择活动结束时间" placeholder="活动结束时间" />
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">抽奖资格：</span>
									<div class="row-content">
										<div class="row-value">
											<input type="radio" <c:if test="${action.actionPrize.relation_id == -1}"> checked="checked"  </c:if>
											 action="limits.toggle" target="lottery-activity"  id="limit-0" name="limits" value="0"/>
											<label for="limit-0">不限</label>
											<input type="radio" <c:if test="${action.actionPrize.relation_id != -1}"> checked="checked"  </c:if>
											action="limits.toggle" target="lottery-activity"  id="limit-1"  name="limits" value="1"/>
											<label for="limit-1">限报名用户</label>
										</div>
									</div>
								</div>

								<div class="form-row" id="lottery-activity">
									<span class="row-label">关联活动：</span>
									<div class="row-content">
										<select class="select" name="relationid" id="acitvity">
										<option value="${action.actionPrize.relation_id}">${action.actionPrize.relation_info}</option>
											<c:forEach items="${actionList}" var="option">
									           <option value="${option.id}">${option.title}</option>
                                             </c:forEach>
										</select>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">抽奖次数：</span>
									<div class="row-content">
										<input name="availabletimes" type="text" class="text"   placeholder="没有抽奖上限请填写-1"  iname="抽奖次数" value="${action.actionPrize.available_times}"/>次/每天
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">奖品设置：</span>
									<div class="row-content">
										<div lottery-editor>
											<script type="text/json">
												${prizeInfoJSON}
											</script>
										</div>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">活动图片：</span>
									<div class="row-content">
										<div  xx-upload>
											<script type="text/config">
												{
													name:'thumb',
													checker:{
														iname:'活动图片',
														itip:'请上传活动图片'
													},
													uploadURL:'/Manager/web/resource/upload/',
													template:'/Manager/web/resource/download?resourceId={value}',
													value:'${action.thumb}'
												}
											</script>
										</div>
										<p class="value-note">图片规格：640x280</p>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">介绍：</span>
									<div class="row-content">
										<textarea name="intro" id="desc5" simditor iname="活动介绍"  value="">${action.intro}</textarea>
									</div>
								</div>
								<div class="form-row form-row-btn">
									<div class="row-content">
										<input type="hidden" name="type" value="6">
										<input type="hidden" name="id" value="${action.actionId}">
										<input type="submit" value="确认提交" class="btn btn-default"/>
									</div>
								</div>
							</div>
						</form>
						
						<form  class="fn-hide"  data-form="notify"  action="/Manager/web/action/updateSave" method="post" goback="/Manager/web/action/listPage">
							<div class="form-block">
								<input type="hidden" name="type" value="8">
								<input type="hidden" name="id" value="${action.actionId}">
								<div class="form-row">
									<span class="row-label">活动标题：</span>
									<div class="row-content">
										<input name="title" type="text" class="text"   ipattern="^.{2,40}$" iname="活动标题" value="${action.title}"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">活动时间：</span>
									<div class="row-content">									 	
										<input type="text" name="sdate"  value="${action.applyStartDate}" class="text text-datetime" date-select="datetime" iname="活动起始时间" itip="请选择活动起始时间" placeholder="活动起始时间" />
										<span>~</span>
										<input type="text" name="edate"  value="${action.applyEndDate}"  class="text text-datetime" date-select="datetime" iname="活动结束时间" itip="请选择活动结束时间" placeholder="活动结束时间" />
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">活动权重：</span>
									<div class="row-content">
										<input name="sort" type="text" placeholder="权重越高，排名越靠前"  class="text"   ipattern="^\d+(\.\d+)?$" iname="活动权重" value="${action.sort}"/>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">活动图片：</span>
									<div class="row-content">
										<div  xx-upload>
											<script type="text/config">
												{
													name:'thumb',
													checker:{
														iname:'活动图片',
														itip:'请上传活动图片'
													},
													uploadURL:'/Manager/web/resource/upload/',
													template:'/Manager/web/resource/download?resourceId={value}',
													value:'${action.thumb}'
												}
											</script>
										</div>
										<p class="value-note">图片规格：640x280</p>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">介绍：</span>
									<div class="row-content">
										<textarea name="intro" id="desc" simditor class="textarea" iname="活动介绍"   value="">${action.intro}</textarea>
									</div>
								</div>
								<div class="form-row form-row-btn">
									<div class="row-content">
										<input type="submit" value="确认提交" class="btn btn-default"/>
									</div>
								</div>
							</div>
						</form>
    				</div>
    			</div>

    		</div>
    	</div>
    </section>


	<script id="xiuxiu/upload" type="text/template" note="美图秀秀上传">
		<div class="row-content" xiuxiu style="height:400px">
		</div>
	</script>

	<script type="text/template" id="lottery/editor" title="奖项编辑器">
		<div class="row-value align-left">
			{{if data && data.length < max}}
			<a href="javascript:;" action="lottery.item.add" class="action-link">添加奖项+</a>
			{{else}}
			<a href="javascript:;" class="action-link">最多添加<b>{{max}}</b>个奖项</a>
			{{/if}}
			{{if data && data.length < min}}
			<input type="hidden" name="_checker" value="1"  ipattern="test" iname="奖项" itip="请添加至少{{min-data.length}}个奖项"/>
			{{/if}}
		</div>
		<table class="table table-lottery align-center">
			<thead>
			<tr>
				<th class="align-left">#</th>
				<th class="align-left">奖项</th>
				<th class="align-left">奖项的详细信息</th>
				<th class="align-right">概率(%)</th>
				<th>剩余数量/总数</th>
				<th class="align-right">操作</th>
			</tr>
			</thead>
			<tbody>
			{{if !data || !data.length}}
			<tr>
				<td colspan=5 class="align-left">请添加至少<b>{{min}}</b>个奖项</td>
			</tr>
			{{/if}}
			{{each data}}
			<tr>
				<td class="align-left">
					<p>{{$index+1}}</p>
				</td>
				<td class="align-left">
					<p>{{$value.name}}</p>
				</td>
				<td class="align-left">
					<p>{{$value.info}}</p>
				</td>
				<td class="align-right" style="padding-right: 15px;">{{$value.winningprobability}}</td>
				<td>{{$value.count-$value.winningnumber}}/{{$value.count}}</td>
				<td class="align-right">
					<a action="lottery.item.edit" data-params="{{$value | toJSON}}" href="javascript:;" class="action-link">编辑</a>
				</td>
			</tr>
			{{/each}}
			</tbody>
			<tfoot class="fn-hide">
			<tr>
				<td colspan=3 class="align-right" style="padding-right: 10px;">
					总概率：<span>{{data | pluck:'winningprobability' | totalProbability}}%</span>
				</td>
				<td colspan=2>
					<input type="hidden" name="lottery" value="{{data |  toJSON}}" />
				</td>
			</tr>
			</tfoot>
		</table>
	</script>

	<script type="text/template" id="lottery/add" title="添加奖项">
		<form>
			<div class="form-row">
				<span class="row-label">奖项名称：</span>
				<div class="row-content">
					<input type="text" class="text" name="name"  value="{{name}}" ipattern="^.{1,20}$" iname="奖项名称"/>
				</div>
			</div>
			<div class="form-row">
				<span class="row-label">奖品详细信息：</span>
				<div class="row-content">
					<input type="text" class="text" name="info"  value="{{info}}" ipattern="^.{1,40}$" iname="奖品详细信息"/>
				</div>
			</div>
			<div class="form-row">
				<span class="row-label">奖品数量：</span>
				<div class="row-content">
					<input type="text" class="text" name="count"  value="{{count}}" ipattern="^\d+$"  iname="奖品数量"/>
					<span class="text-suffix">个</span>
				</div>
			</div>
			<div class="form-row">
				<span class="row-label">中奖概率：</span>
				<div class="row-content">
					<input type="text" class="text" name="winningprobability"  value="{{winningprobability}}" ipattern="^\d{1,2}(\.\d+)?$"  iname="中奖概率"/>
					<span class="text-suffix">%</span>
					<p class="value-note">请填写0-100范围内的数字</p>
				</div>
			</div>
		</form>
	</script>

	<script type="text/template" id="lottery/edit" title="修改奖项">
		<form>
			<div class="form-row">
				<span class="row-label">奖项名称：</span>
				<div class="row-content">
					<input type="text" class="text" name="name"  value="{{name}}"  ipattern="^.{1,20}$"  iname="奖项名称"/>
				</div>
			</div>
			<div class="form-row">
				<span class="row-label">奖品详细信息：</span>
				<div class="row-content">
					<input type="text" class="text" name="info"  value="{{info}}" ipattern="^.{1,40}$" iname="奖品详细信息"/>
				</div>
			</div>
			<div class="form-row">
				<span class="row-label">奖品数量：</span>
				<div class="row-content">
					<input type="text" class="text" name="count"  value="{{count}}" ipattern="^\d+$"  iname="奖品数量"/>
				    <p class="value-note">如果不是中奖项请填写0</p>
                </div>
			</div>
			<div class="form-row">
				<span class="row-label">中奖概率：</span>
				<div class="row-content">
					<div class="com-input">
						<input type="text" class="text" name="winningprobability"  value="{{winningprobability}}" ipattern="^\d{1,2}(\.\d+)?$"  iname="中奖概率"/>
						<span class="com-input-suffix">%</span>
					</div>
				</div>
			</div>
			<!--<div class="form-row">
				<span class="row-label">中奖次数：</span>
				<div class="row-content">
					<input type="text" class="text" name="limits"  value="{{limits || 0}}" ipattern="^\d+$"  iname="中奖限制"/>
					<p class="value-note">最多中奖次数，不限制请填0</p>
				</div>
			</div>-->
			<input type="hidden" name="id" value="{{id}}" />
		</form>
	</script>
   <script src="/pages/assets/js/libs/LAB/LAB.js"></script>
   <script>
   		var baseUrl="/pages/assets/js/libs/";
		var UEDITOR_HOME_URL='/pages/assets/js/libs/ueditor/';
		
		// 图片上传路径
		var UEDITOR_UPLOAD_URL="/Manager/web/resource/upload";
		
		// 图片访问地址
		var imageUrlPrefix='/Manager/web/resource/download/';
		//var imagePattern="http://jgrm.net/Radio/resource/{{data}}";	
		var imagePattern="http://radio1.iwxlh.com/Radio/resource/{{data}}";	
   		$LAB.require({
			baseUrl:baseUrl,
			scripts:[
				['../third/xiuxiu/xiuxiu.css','../third/xiuxiu/xiuxiu.js'],
				["artTemplate/artTemplate2.js","artTemplate/artTemplate.helpers.js"],
				["form/jquery.formCheck.js","form/jquery.ajaxSubmit.js"],
				//["moment.min.js","jquery-date-range-picker/daterangepicker.css","jquery-date-range-picker/jquery.daterangepicker.js"],
				//["uploadify/uploadify.css","uploadify/uploadify-min.js"],
				//["calendar/datepicker.css","calendar/bootstrap-datepicker.js"],
				["datetimepicker/css/bootstrap-datetimepicker.css","datetimepicker/js/bootstrap-datetimepicker.js"],
				["ueditor/themes/default/css/ueditor.min.css","ueditor/ueditor.config.js","ueditor/ueditor.all.js"],
				//["simditor/styles/simditor.css","simditor/scripts/module.min.js","simditor/scripts/hotkeys.min.js","simditor/scripts/simditor.js"],
				["dialog/mui-dialog.css","dialog/dialog-plus-min.js"],
				['vue/1.0.10/vue.min.js']
			]
		},function(){
			var App={
				alert : function(){
					alert(arguments[0]);
				},
				init : function(){
					this.initDatePicker();
					this.initXiuXiuUpload();
					this.initLotteryEditor();
					this.initFieldEditor();
					this.initEditor();
					this.initEvents();
					this.initForm();
				},
				initDatePicker:function(){

					$('[date-select="datetime"]').datetimepicker({
						format: "yyyy-mm-dd hh:ii",
						autoclose: true,
						language:'zh-CN'
					});

					$('[date-select="date"]').datetimepicker({
						todayHighlight:true,
						language:"zh-CN",
						format : "yyyy-mm-dd",
						autoclose:true,
						minView:2
					});
				},
				initEvents:function(){

					var app=this;

					$('body').on("click","[action]",function(){
						var $this=$(this);
						var action=$this.attr("action");
					})

					$('select[data-selected]').each(function(){
						var $this=$(this);
						var value=$this.data('selected');
						if(value) $this.val(value);
					})

					$('[pay=toggle]').on('pay.toggle',function(){
						$(this).parents('form:first').find('[pay=true]').attr('disabled',!$(this).prop('checked'));
					}).on('click',function(){
						$(this).trigger('pay.toggle');
					}).trigger('pay.toggle');

					//活动类型控制
					var initType=$("#block-content").attr('init')||1;
					var $actSelects=$("[activity-select]")
					$actSelects.val(initType);
					$actSelects.on("change",function(e,isFirst){
						var $this=$(this);
						var value=$this.val();
						var type=$this.find("option:selected").data("type");
						$("[data-form]").hide().filter("form[data-form="+type+"]").show();
						$actSelects.val(value);
					}).trigger("change",false);


					// 大转盘活动关联
					$('[action="limits.toggle"]').on('change',function(){
						var $this=$(this);
						var value=Number($this.val());
						var $target=$('#'+$this.attr('target'));
						value?$target.show().find('select').removeAttr('disabled'):$target.hide().find('select').attr('disabled',true);
					}).filter(':checked').trigger('change');
				},

				// 初始化编辑器
				initEditor:function(){
					$('[simditor]').each(function(){
						var $this=$(this);
						var id="rd_"+Math.random();
						$this.attr('id',id);
						var ue = UE.getEditor(id, {
							zIndex :1,
							imageScaleEnabled:false,
							imageActionName:UEDITOR_UPLOAD_URL,
							imageUrlPrefix :imageUrlPrefix,
							imageFieldName :'files',
							imageUploadHandler:function(result){
								return template.compile(imagePattern)(result)
							},
							imageAllowFiles:[".png", ".jpg", ".jpeg", ".gif", ".bmp"],
							toolbars: [
								['anchor', //锚点
									'undo', //撤销
									'redo', //重做
									'bold', //加粗
									'indent', //首行缩进
									'italic', //斜体
									'underline', //下划线
									'strikethrough', //删除线
									'subscript', //下标
									'fontborder', //字符边框
									'superscript', //上标
									'formatmatch', //格式刷
									'blockquote', //引用
									'pasteplain', //纯文本粘贴模式
									'preview', //预览
									'horizontal', //分隔线
									'removeformat', //清除格式
									'time', //时间
									'date', //日期
									'unlink', //取消链接
									'inserttitle', //插入标题
									'insertcode', //代码语言
									'fontsize', //字号
									'paragraph', //段落格式
									'simpleupload', //单图上传
									//'insertimage', //多图上传
									'link', //超链接
									'emotion', //表情
									'spechars', //特殊字符
									'map', //Baidu地图
									'insertvideo', //视频
									'justifyleft', //居左对齐
									'justifyright', //居右对齐
									'justifycenter', //居中对齐
									'justifyjustify', //两端对齐
									'forecolor', //字体颜色
									'backcolor', //背景色
									'insertorderedlist', //有序列表
									'insertunorderedlist', //无序列表
									'fullscreen', //全屏
									'directionalityltr', //从左向右输入
									'directionalityrtl', //从右向左输入
									'rowspacingtop', //段前距
									'rowspacingbottom', //段后距
									'pagebreak', //分页
									'imagenone', //默认
									'imagecenter', //居中
									'lineheight', //行间距
									'music', //音乐
								] // 图表
							]
						});
					})
				},

				initForm:function(){
					var $form=$("form").ajaxSubmitify()
				}
			}

			// 图片上传
			$.extend(App,{

				initXiuXiuUpload:function(){

					var XXUpload=function(el,options){return this.init(el,options)};

					XXUpload.prototype.setValue=function(value){
						var $this = this.$this;
						this.value=value;
						$this.find('input:hidden').val(value || '');
					}

					XXUpload.prototype.getURL=function(){
						var template=this.settings.template;
						var value=this.value;
						return template.replace(/{value}/,value);
					};

					XXUpload.prototype.setImage=function(value){
						var $this = this.$this;
						var template=this.settings;
						$this.addClass('xiuxiu-upload-ok');
						$this.find('img').remove();
						this.setValue(value);
						var imageURL=this.getURL();
						$this.append($('<img>').attr({
							src:imageURL
						}))
					}

					XXUpload.prototype.clear=function(settings){
						var $this = this.$this;
						$this.removeClass('xiuxiu-upload-ok');
						$this.find('img').remove();
						this.setValue('');
					}

					XXUpload.prototype.init=function(el,options){

						var $this = this.$this=$(el).empty().addClass('xiuxiu-upload');

						var xx=this;

						var settings = this.settings =  $.extend({
							value:'',
							name:'xx',
							template:'{value}',
							imageURL:function(){
								return this.name;
							},
							callbacks:{
								onBrowse:function(){}
							}
						},options);

						var value=settings.value,
								template=settings.template,
								name=settings.name;
						var $hidden=$('<input type="hidden">').attr('name',name).val(value);
						if(settings.checker) $hidden.attr(settings.checker);
						if(value) {
							xx.setImage(value);
						}

						var $remove=$('<a>').addClass('remove').html('&times;').attr({
							href:'javascript:;',
							action:'remove'
						})

						$this.append($hidden).append($remove);

						$this.on('click',function(e){
							var $target=$(e.target);
							if($target.is('img')) return;
							if($target.is('[action=remove]')){
								xx.clear();
								return false;
							};
							xx.settings.callbacks.onBrowse.call(xx);
						})
					}

					var app=this;

					$('[xx-upload]').each(function(){
						var $this=$(this);

						var config=$this.find('script').remove().html().replace(/^\s+|\s+$/g,'');
						var settings=new Function('return ' + config)();
						var uploadURL=location.origin + settings.uploadURL;
						var options=$.extend(settings,{
							callbacks:{
								onBrowse:function(){
									app.xiuxiuUpload(uploadURL , function(name){
										xxup.setImage(name);
									})
								}
							}
						})

						var xxup = new XXUpload(this,options);
					})
				},

				xiuxiuUpload:function(uploadUrl , callback){
					var id="xiuxiu/upload";
					var title=document.getElementById(id).title;
					var content=template(id,{});
					var idialog=dialog({
						id : id,
						zIndex: 5,width:600,height:400,
						padding:"0 0",
						onshow:function(){

							var $content=this.getContent();
							var $xiuxiu = $content.find('[xiuxiu]');

							var elId="xiuxiu__"+Math.random();

							$xiuxiu.attr('id',elId);
							xiuxiu.setLaunchVars("subBrowseBtnVisible", 1);
							xiuxiu.setUploadType(2);
							xiuxiu.setLaunchVars("customMenu", ['edit']);
							xiuxiu.setLaunchVars("cropPresets", ["640:280"]);
							xiuxiu.embedSWF(elId, 1, "100%","100%");

							xiuxiu.setUploadURL(uploadUrl);//修改为您自己的上传接收图片程序
							xiuxiu.onBeforeUpload = function(data, id) {
								xiuxiu.setUploadArgs({
									flag : "1"
								});
							}

							xiuxiu.onInit = function() {
								// 解决在chrome下初始化后不显示的问题
								if(/Chrome/.test(navigator.userAgent)){
									setTimeout(function(){
										// 触发reflow才会显示出来
										$content.css('margin-top', 1)
									}, 10)
								} 
							}

							xiuxiu.onClose=function(){
								xiuxiu.remove();
								idialog.remove();
							}

							xiuxiu.onUploadResponse = function(data) {
								var result = JSON.parse(data);
								var code=Number(result.code);
								if(code===200){
									callback(result.data);
									xiuxiu.remove();
									idialog.remove();
								}else{
									var msg=result.msg||'上传失败！';
									alert(msg)
								}
							}
						}
					})
					idialog.title(title).content(content).showModal();
				}
			})


			// 奖项编辑器
			$.extend(App,{
				initLotteryEditor:function(){

					// 计算总概率
					template.helper('totalProbability',function(list){
						var totalProbability= Number((new Function('return '+list.join('+'))() || 0).toFixed(2));
						return totalProbability;
					});

					template.helper('addAttr',function(obj,attr,value){
						if(Object.prototype.toString.apply(obj)==='[object Object]') {
							obj[attr]=value;
						}
						return obj;
					});

					template.helper('transformData',function(obj){
						if(Object.prototype.toString.apply(obj)==='[object Array]') {
							obj = obj.map(function(value,i){
								value.prizeid=i+1;
								delete value.id;
								return value;
							})
						}
						return obj;
					});

					var LotteryEditor=function(el,options){
						return this.init(el,options)
					}

					LotteryEditor.prototype={

						init:function(el,options){
							this.el=el;
							this.$el=$(el);

							var defaults={
								max:12,
								min:6
							};

							this.options=$.extend({},defaults,options);
							this.data=[];

							this.addItem(this.options.data,false);

							//this.data=this.options.data;
							this.initEvents();
							this.render();
							return this;
						},

						initEvents:function(){
							var that=this;
							var actions=this.options.actions;
							this.$el.on('click',function(e){
								var $target=$(e.target);
								var action=$target.attr('action');
								var regex=/^lottery\.item\.(\w+)$/;
								if(regex.test(action)){
									var fnName=regex.exec(action)[1];
									var fn=actions[fnName];
									if(typeof fn==='function'){
										var data=$target.data('params');
										fn.call(that,data);
									}
								}
							})
						},

						render:function(){
							var list=this.data;
							var renderData = $.extend({data:list},this.options.config);

							var html =  this.options.template(renderData);
							this.$el.html(html);
						},

						_keys:{},
						hasItem:function(id){
							return id in this._keys;
						},
						isPlainObject:function(o){
							return Object.prototype.toString.apply(o)==='[object Object]';
						},
						isArrayObject:function(o){
							return Object.prototype.toString.apply(o)==='[object Array]';
						},
						createId:function(){
							var id='le_'+Math.random();
							if(id in this._keys) return this.createId();
							this._keys[id]=id;
							return id;
						},

						addItem:function(item,render){
							var that=this;

							if(this.isArrayObject(item)){
								item.forEach(function(value,i){
									that.addItem(value,render);
								})
								return;
							}

							if(!this.isPlainObject(item)) throw new Error('invalid Object!');

							var theItem=item;

							if(!theItem.id) {
								theItem.id = this.createId();
							}

							else if(this.hasItem(theItem.id)){
								this.removeItem(theItem.id,false);
							}

							this.data.push(theItem);
							this._keys[theItem.id]=theItem.id;

							if(render!==false){
								this.render();
							}
						},

						updateItem:function(item){
							this.data = this.data.map(function(o,i){
								return o.id==item.id ?$.extend({},o,item) : o;
							})
							this.render();
						},

						removeItem:function(id,render){
							var that=this;
							this.data = this.data.filter(function(value,i){

								var ok=value.id!=id;

								if(!ok){
									delete that._keys[id];
								}

								return ok;
							})

							if(render!==false){
								this.render();
							}
						}
					};

					var app=this;
					$('[lottery-editor]').each(function(){
						var $this=$(this);
						var data=[];

						var $script=$this.find('script');
						if($script.length==1){
							var initData =$script.remove().html().trim();
							var theData=new Function('return '+initData)();
							if(theData instanceof Array) data=theData;
						}

						$this.empty();

						var le=new LotteryEditor(this,{
							config:{
								max:12,min:6
							},
							data:data,
							template:template.compile(document.getElementById('lottery/editor').innerHTML),
							actions:{
								'add':function(){
									app.editLottery('lottery/add').then(function(item){
										le.addItem(item);
									})
								},
								'edit':function(data){
									app.editLottery('lottery/edit',data).then(function(item){
										le.updateItem(item);
									})
								},
								'remove':function(id){
									le.removeItem(id);
								}
							}
						})
						console.info(le);
					})
				},

				// 编辑中奖项
				editLottery:function(id , data){
					var app=this;
					var dtd = $.Deferred();
					var title=document.getElementById(id).title;
					var content=template(id,data);
					var idialog=dialog({
						id : id,
						zIndex: 5,width:420,
						padding:"0 20px",
						button:[
							{
								id:"cancel",value:"取消"
							},
							{
								id:"ok",value:"确定",
								autofocus:true,
								callback:function(){
									var $form=this.getContent().find("form");
									$form.checkForm({
										onSuccess:function(){
											var data=$.deParam($form.serialize());
											dtd.resolve(data);
											idialog.remove();
										},
										onFail:function(e){
											alert(e);
											e.focus();
										}
									})
									return false;
								}
							}
						]
					})
					idialog.title(title).content(content).showModal();
					return dtd;
				}
			});

			// 字段编辑器
			$.extend(App,{
				initFieldEditor:function(){
					//Vue.config.debug = true;
					var app=this;
					$('[field-editor]').each(function(){
						var $this=$(this);
						var data=[];
						var $script=$this.find('script');
						if($script.length==1){
							var initData =$this.find('script').remove().html().trim();
							var theData=new Function('return '+initData)();
							if(theData instanceof Array) data=theData;
						}

						var fe=new Vue({
							el:$this.get(0),
							data:{
								max:12,
								list:data
							},
							methods:{
								getID:function(item){
									return Math.random()*10;
								},
								addField:function(data){
									var id=this.getID();
									var d=data || {};
									d.id=id;
									this.list.push(d);
									this.$nextTick(function () {
										$(this.$el).find('input:text:last').focus();
									})
								},
								removeField:function(id){
									this.list=this.list.filter(function(d){
										return d.id!=id;
									})
								}
							}
						})
					})
				}
			});

			App.init();
		})
   </script>
    </body>
</html>